Ext.namespace("Nippy.Components.Grids");
Nippy.Components.Grids.ImageSizes = Ext.extend(Ext.grid.EditorGridPanel, {
	constructor: function(config){
		Nippy.Components.Grids.ImageSizes.superclass.constructor.apply(this, arguments);
    }
	,initComponent: function(){
		Ext.apply(this, {
    		cm: /*START ColumnModel*/
    			new Ext.grid.ColumnModel(
				    [{
    				        header: 'Размер',
    				        dataIndex: 'SizeName',
    				        width: 100,
    				        readonly: true
				      },{
    				        header: 'Alt',
    				        dataIndex: 'Alt',
    				        width: 180,
    				        editor: new Ext.form.TextField({allowBlank: false,maxLength: 255})
				      },{
					        header: 'Title',
					        dataIndex: 'Title',
					        width: 180,
					        editor: new Ext.form.TextField({allowBlank: false,maxLength: 255})
					  },{
    				        header: 'Ширина',
    				        dataIndex: 'Width',
    				        width: 50
    				        //editor: new Ext.form.TextField({allowBlank: false,maxLength: 255})
					  },{
						  	header: 'Высота',
      				        dataIndex: 'Height',
      				        width: 50
      				        //editor: new Ext.form.TextField({allowBlank: false,maxLength: 255})
				      }]
				    ),
    			/*END ColumnModel*/
    		store: new Nippy.Components.Grids.ImageStore(),
    		clicksToEdit:2,
    		selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
			tbar: [ {text: 'Заменить', scope: this, handler: this.replaceClick}]
    	});
		
		Nippy.Components.Grids.ImageSizes.superclass.initComponent.apply(this, arguments);
	}
	,load: function(imageId){
		this.imageId = imageId;
		this.getStore().load({params: {id: this.imageId , sizeName: 1}});
	}
	,replaceClick: function(){
		var r = this.getSelectionModel().getSelected();
		var wnd = new Nippy.Components.Dialogs.UploadImage({
			replace: {Id: r.data.Id,SizeId: r.data.SizeId},
			closable: true,width: 400,modal: true,resizable: false});
		wnd.addListener('onuploaded',this.imageUploaded,this);
		wnd.show(r.data.Alt,r.data.Title);
	}
	,imageUploaded: function(){
		var r = this.getSelectionModel().getSelected();
		this.getStore().load({params: {id: this.imageId, sizeName: 1}});
	}
});

Nippy.Components.Grids.ImageStore = Ext.extend(Ext.data.Store, {
	constructor: function(config){
		Ext.apply(this,{
			restful: true,
			proxy: new Ext.data.HttpProxy({
				url: '/admin/gallery-item',
				restful: true		
			}),
		    
		    reader: new Ext.data.JsonReader({
			    	root: 'data',
					totalProperty: '',
					idProperty: 'CompositeId'
				},[
				   	{name: 'CompositeId', type: 'string', mapping: 'CompositeId'},
				    {name: 'Id', type: 'int', mapping: 'Id'},
			    	{name: 'SizeId', type: 'int', mapping: 'SizeId'},
					{name: 'SizeName', type: 'string', mapping: 'SizeName'},
					{name: 'Alt', type: 'string', mapping: 'Alt'},
					{name: 'Title', type: 'string', mapping: 'Title'},
					{name: 'Width', type: 'int', mapping: 'Width'},
					{name: 'Height', type: 'int', mapping: 'Height'},
					{name: 'Ext', type: 'string', mapping: 'Ext'}
			]),
			writer:new Ext.data.JsonWriter({encode: false})
		});
		Nippy.Components.Grids.ImageStore.superclass.constructor.apply(this, arguments);
	}
});